<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>分类</title>
    <link rel="stylesheet" type="text/css" href="./themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="./themes/icon.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="js/jquery.serializejson.min.js"></script>

</head>

<body>
	    <div class="easyui-layout" style="width:700px;height:350px;" data-options="fit:true">
        <div data-options="region:'north'" style="height:50px">
        	<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'" onclick="addp(1)">产品</a>
        	<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'" onclick="addn(0)">新闻</a>
        	<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'" onclick="addr(3)">评论</a>
        	<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'" onclick="addu(2)">用户</a> 	
        </div>
        <div data-options="region:'west',split:true" title="west" style="width:200px;">
        	<ul id="tt"></ul>
        	<ul id="tb"></ul>
        	
        </div>
        <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">
      <table class="easyui-datagrid" data-options="url:'datagrid_data1.json',method:'get',border:false,singleSelect:true,fit:true,fitColumns:true">
	<div style="padding:5px 0;">
        <a href="#" id="addBtn"class="easyui-linkbutton" data-options="iconCls:'icon-add'">增加根节点</a>
        <a href="#" id="addSon" class="easyui-linkbutton" data-options="iconCls:'icon-add'">增加子节点</a>
        <a href="#" id = "Change" class="easyui-linkbutton" data-options="iconCls:'icon-add'">修改</a>
        <a href="#" id ="Delete" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">删除</a>
	</div>
        </table>
       <!--增加根节点-->
		<div id="dlg" class="easyui-dialog" title="增加根节点" data-options="iconCls:'icon-save',closed:true" style="width:400px;height:320px;padding:10px">
        <form id="ff" method="post">
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="text" style="width:100%" data-options="label:'Text:',required:true">
            </div>
        <div style="text-align:center;padding:5px 0">
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">Submit</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
        </div>
        </form>
		</div>
       <!--增加子节点-->
		<div id="dlgSon" class="easyui-dialog" title="增加子节点" data-options="iconCls:'icon-save',closed:true" style="width:400px;height:320px;padding:10px">
        <form id="fSon" method="post">
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="text" style="width:100%" data-options="label:'Text:',required:true">
            </div>            
        <div style="text-align:center;padding:5px 0">
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForms()" style="width:80px">Submit</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForms()" style="width:80px">Clear</a>
        </div>
        </form>
		</div>
		<!--修改-->
        <div id="dlgChange" class="easyui-dialog" title="修改" data-options="iconCls:'icon-save',closed:true" style="width:400px;height:320px;padding:10px">
        <form id="fChange" method="put">
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="text" style="width:100%" data-options="label:'Text:',required:true">
            </div>            
        <div style="text-align:center;padding:5px 0">
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitFormC()" style="width:80px">Submit</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearFormC()" style="width:80px">Clear</a>
        </div>
        </form>
		</div>
		<!--删除-->
	<div id="dlgDelete" class="easyui-dialog" title="删除" data-options="iconCls:'icon-save',closed:true" style="width:400px;height:320px;padding:10px">
        <form id="fDelete">
            <div style="margin-bottom:20px">
                	确认删除记录码？	
            </div>            
        <div style="text-align:center;padding:5px 0">
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitFormD()" style="width:80px">Submit</a>
        </div>
        </form>
		</div>
    </div>
    <script type="text/javascript">
    //North
   //增加根节点
    var type = null;
    var parentId = null
    var ownId = null;
    function addp(num){
     $('#tt').tree({
        url:'http://localhost:3000/cate/list/1',
        method:"post"
        })
     	type = num
    }
    function addn(num){
     $('#tt').tree({
        url:'http://localhost:3000/cate/list/0 ',
        method:"post"
    })
     	type = num
     
    }
        function addr(num){
     $('#tt').tree({
        url:'http://localhost:3000/cate/list/3',
        method:"post"
    })
     	type = num
     
        }
    function addu(num){
     $('#tt').tree({
        url:'http://localhost:3000/cat/list/2',
        method:"post"
    })
     	type = num
     
    }

    $("#addBtn").click(function(){
    	if(type===null){
            $.messager.show({
                title:'提示信息',
                msg:'请先选择分类',
                showType:'show'
            })
    	}else{
    		$('#dlg').dialog('open')
    	}
    })
        function submitForm(){
          var formdata = ($('#ff').serializeJSON())//获取表单数据
          formdata.type = type;
          $.ajax({
          	type:"post",
          	url:"http://localhost:3000/cate/data",
          	data:formdata,
          	async:true
          }).done(function(res){
          	$.messager.show({
                title:'提示信息',
                msg:'数据添加成功',
                showType:'show'
            })
          	parentId = null;
          	type = null;
          	ownId = null;
          	$('#dlg').dialog('close')
          	$("#tt").tree('reload');
          	
          })
        }
        function clearForm(){
            $('#ff').form('clear');
        }
//上面是增加根节点，下面是增加子节点

    $("#addSon").click(function(){
    	console.log(parentId,type);
    	if(type!==null && parentId !==null || undefined){
    		$('#dlgSon').dialog('open')
    	}
    	else{
    			$.messager.show({
                title:'提示信息',
                msg:'请先选择分类,然后选择分类之中的分类',
                showType:'show'
            })
    	}
    })
    $("#tt").tree({  
                onClick:function(node){  
                   parentId = node._id;
                   ownId = node._id;
                }  
            });
    function submitForms(){
          var formdata = ($('#fSon').serializeJSON())//获取表单数据
          formdata.type = type;
          formdata.parentId = parentId;
          $.ajax({
          	type:"post",
          	url:"http://localhost:3000/cate/data",
          	data:formdata,
          	async:true
          }).done(function(res){
          	$.messager.show({
                title:'提示信息',
                msg:'子数据添加成功',
                showType:'show'
            })
          	parentId = null;
          	type = null;
          	ownId = null;
          	$('#dlgSon').dialog('close')
          	$("#tt").tree('reload');
          	
          })
        }
        function clearForms(){
            $('#dlgSon').form('clear');
        }
        //修改;
      $("#Change").click(function(){
    	console.log(parentId,type);
    	if(type!==null && parentId !==null || undefined){
    		$('#dlgChange').dialog('open')
    	}
    	else{
    			$.messager.show({
                title:'提示信息',
                msg:'请先选择分类,然后选择分类之中的分类',
                showType:'show'
            })
    	}
    })
         function submitFormC(){
          var formdata = ($('#fChange').serializeJSON())//获取表单数据
          $.ajax({
          	type:"put",
          	url:"http://localhost:3000/cate/data/"+ownId,
          	data:formdata,
          	async:true
          }).done(function(res){
          	$.messager.show({
                title:'提示信息',
                msg:'数据修改成功',
                showType:'show'
            })
          	ownId = null;
          	type = null;
          	parentId = null;
          	$('#dlgChange').dialog('close')
          	$("#tt").tree('reload');
          	
          })
        }
         function clearFormC(){
            $('#dlgChange').form('clear');
        }
         
    //删除
    $("#Delete").click(function(){
    	if(type!==null && parentId !==null || undefined){
    		$('#dlgDelete').dialog('open')
    	}
    	else{
    			$.messager.show({
                title:'提示信息',
                msg:'请先选择分类,1然后选择分类之中的分类',
                showType:'show'
            })
    	}
    })
      function submitFormD(){
          $.ajax({
          	type:"delete",
          	url:"http://localhost:3000/cate/data/"+ownId,
          	data:'',
          	async:true
          }).done(function(res){
          	$.messager.show({
                title:'提示信息',
                msg:'数据删除成功',
                showType:'show'
            })
          	ownId = null;
          	type = null;
          	parentId = null;
          	$('#dlgDelete').dialog('close')
          	$("#tt").tree('reload');
          	
          })
        }
    </script>
</body>
</html>